<template>
  <div id="breadcrumb2">
    <el-breadcrumb separator="/">
      
      <el-breadcrumb-item
        v-for="(item, index) in breadList"
        :key="index"
        :to="{ name: item.name }"
        >{{ item.meta.title }}</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  naem: "tagswrapper",
  data() {
    return {
      back:'<',
      breadList: [] // 路由集合
    };
  },
  watch: {
    //路由改变的时候监听
    $route() {
      this.getBreadcrumb();
    }
  },
  created() {
    this.getBreadcrumb();
  },
  methods: {
   
    isHome(route) {
      //拿到首页
      return route.name === "home";
    },

    getBreadcrumb() {
      let matched = this.$route.matched; //拿到显示的路由路径
      // console.log("matched", matched);
      if (this.isHome(matched[0])) {
        //当前路由等于首页
        // matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
        matched[0].name = "face";
      }

      this.breadList = matched;
    }
  }
};
</script>
<style scoped>
#breadcrumb2 {
  padding: 10px 10px;
  background: #ffffff;
}
.active {
  color: red;
}
.activefs {
  color: gray;
}

.tags-view-item {
  width: 100px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
</style>
